<template>
    <div ref="box">
        <h6>菜单主题颜色切换</h6>
        <el-form ref="form" :model="theme" label-width="40%">
            <el-form-item label="背景颜色">
                <el-color-picker v-model="theme.backgroundColor"></el-color-picker>
            </el-form-item>
            
            <el-form-item label="文本颜色">
                <el-color-picker v-model="theme.textColor"></el-color-picker>
            </el-form-item>

            <el-form-item label="文本激活颜色">
                <el-color-picker v-model="theme.activeTextColor"></el-color-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click.stop="changeMenuTheme(theme)">切换菜单主题颜色</el-button>
            </el-form-item>
        </el-form>
        <el-button @click="toLogout(false)">模拟退出登录</el-button>
    </div>
</template>

<script>
// 系统设置页面
// 引入vuex的mapMutations,设置当前菜单主题颜色
import { mapMutations } from 'vuex'
export default {
    name: 'SystemConfig',
    data() {
        return {
            // 菜单主题颜色对象
            theme: {
                backgroundColor: '#545c64',// 默认主题背景颜色
                textColor: '#fff',// 默认文本颜色
                activeTextColor: '#ffd04b',// 激活时的文本颜色
            },
        }
    },
    methods: {
        // 设置已修改的菜单主题颜色（注意，调用changeMenuTheme方法的地方必须手动将theme对象作为实参传入，否则默认会拿到鼠标event事件）
        ...mapMutations({ changeMenuTheme: 'ChangeThemeColor' , toLogout: 'Authorize'}),

        /**
         * 切换菜单主题颜色（如果不借助vuex的代码生成插件mapMutations）
         */
        changeThemeColor() {
            this.$store.commit('ChangeThemeColor', this.theme)
        },
    },
    mounted() {

    },
    computed: {

    },
    watch: {
        // 监听对象属性变化，圣读监听
        theme: {
            deep: true,
            immediate: false,
            handler(theme) {
                console.log('theme:', theme)
            }
        }
    },
    beforeDestroy() {

    }
}
</script>

<style scoped>
</style>